<template>
  <div>
    <a-modal :visible="iframeVisible" :title="modalTitle" :footer="isFooter ? undefined : null" :width="modalWidth" @cancel="handleClose">
      <div class="iframe-container">
        <div class="iframe-main">
          <div class="iframe-panel">
            <iframe v-if="iframeUrl" :src="iframeUrl" width="100%" height="100%" frameborder="0"></iframe>
            <div class="iframe-dom-container" v-if="dom">
              <div v-html="dom" style="width: 100%; height: 100%"></div>
            </div>
          </div>
        </div>
        <div class="iframe-loading-mask" v-if="spinning">
          <a-spin :spinning="spinning" tip="加载中..." size="large" />
        </div>
      </div>
      <div v-if="isFooter" slot="footer">
        <a-button @click="handleClose">{{ cancelText }}</a-button>
        <a-button type="primary" @click="handleConfirm">{{ confirmText }}</a-button>
      </div>
    </a-modal>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Prop } from 'vue-property-decorator';
import { Modal, Tree, Collapse, Dropdown, Spin, Descriptions, Table, Tooltip, Form, TreeSelect, FormModel, Card, Row, Col } from '@h3/antd-vue';
import Api from '../../apis/ofy';

interface ReturnResult {
  data: any;
  errcode: number;
  errmsg: string;
  traceId: string;
}

@Component({
  name: 'KshModal',
  components: {
    ATree: Tree,
    ACollapse: Collapse,
    ACollapsePanel: Collapse.Panel,
    ADropdown: Dropdown,
    ASpin: Spin,
    Amodal: Modal,
    ADescriptions: Descriptions,
    ATable: Table,
    ATooltip: Tooltip,
    AForm: Form,
    AFormItem: Form.Item,
    AFormModel: FormModel,
    AFormModelItem: FormModel.Item,
    ACard: Card,
    ARow: Row,
    ACol: Col,
  },
})
export default class IframeModal extends Vue {
  @Prop({ type: Boolean, default: false }) iframeVisible!: boolean;
  @Prop({ type: [Array, String], default: () => [] }) callbackConfig?: any[] | string; // 回调配置
  @Prop({ type: [Array, String], default: () => [] }) filterConfig?: any[] | string; // 筛选配置
  @Prop({ type: String, default: '' }) iframeUrl?: string; // iframe地址
  @Prop({ type: Boolean, default: false }) isFooter?: boolean; // 是否显示底部
  @Prop({ type: String, default: '90%' }) modalWidth?: string; // 弹窗宽度
  @Prop({ type: String, default: '' }) dom?: string; // 弹窗dom
  @Prop({ type: String, default: '取消' }) cancelText?: string; // 取消按钮文本
  @Prop({ type: String, default: '确定' }) confirmText?: string; // 确定按钮文本

  // 添加标题属性
  modalTitle: string = '默认标题'; // 默认标题

  // 回调函数属性
  onClose: Function | null = null;
  onConfirm: Function | null = null;
  callbackConfig: any[] = [];
  filterConfig: any[] = [];

  // 加载态
  spinning: Boolean = false;

  phSpinning: Boolean = false;

  // 修改关闭方法
  handleClose() {
    // 如果有回调函数，先执行回调
    if (typeof this.onClose === 'function') {
      this.onClose();
    }
    // 调用全局方法关闭弹窗
    window.$modalIframe.hide();
  }

  handleConfirm() {
    if (typeof this.onConfirm === 'function') {
      this.onConfirm();
    }
    this.handleClose();
  }
}
</script>

<style lang="less" scoped>
// 修改容器样式以适应弹窗
.iframe-container {
  height: calc(100vh - 260px); // 适应弹窗高度
  background: #f1f2f6;
  border-radius: 8px;
}

.iframe-main {
  height: 100%;
  background: #f1f2f6;
  position: relative;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.iframe-panel {
  display: flex;
  height: 100%;
}

.iframe-dom-container {
  height: 100%;
  width: 100%;

  &:first-child div {
    width: 100%;
    height: 100%;
  }
}

:deep(.ant-modal-body) {
  padding-top: 0 !important;
}

:deep(.ant-modal) {
  top: 60px;
}
</style>
